<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> 
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";    
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>fab后台管理系统-登录</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="登录">
<meta http-equiv="description" content="登录">
<link rel="stylesheet" type="text/css" href="<%=basePath%>css/login.css" />
<script src="<%=basePath%>js/jquery-3.2.1.min.js" type="text/javascript"
	charset="utf-8"></script>
	<style type="text/css">
	    .logo{
	        margin-left: 2%;
            margin-top: 2%;
	    }
	    .logo>img{
	       width:80px;
	       height:80px;
	    }
	    .logo>span{
	      font-size: xx-large;
	    }
	</style>
</head>
<body>
   <%-- <div class="logo">
        <img alt="" src="img/logo.jpg"/><span style="margin-left:8px">FOM DataData APP management platform</span>
   </div>
	<div class="modal-login">
	<!-- class="modal-heading" -->
		<div class="heading"><!-- <img  src="img/logo.png" style='    margin-right: 10px; height: 24px;'><span style="height:2px;">|</span> --><span>登录</span></div>
		<div class="modal-body">
			<form class="validFrom" action="" method="get">
				<div class="errormsg">
					<i class="iconfont icon-formerror">${result.msg }</i>
				</div>
				<div class="flex form-item">
					<!-- <i class="iconfont icon-30user"></i> -->
					<img src="img/user.png" style='width: 26px;height: 26px;'/> <input class="flex-item"
						type="text" placeholder="请输入用户名" id="phone" maxlength="11" name="name"
						placeholder="账号" datatype="/[_a-zA-z	0-9]{4,11}/" errormsg="用户名格式不正确！"
						nullmsg="请输入用户名！" autocomplete="off" value="${result.telephone }" />
				</div>
				<div class="flex form-item">
				<img src="img/password.png" style='width: 26px;height: 26px;'/>
					<!-- <i class="iconfont icon-lock"></i> --> <input class="flex-item" id="password" name="password"
						type="password" placeholder="密码" maxlength="20"
						datatype="/[_a-zA-z0-9]{6,20}/"  errormsg="密码格式不正确！"
						nullmsg="请输入密码！" autocomplete="off" value="${result.password }" />
				</div>
				<div class="modal-footer">
					<a href="forgetPwd.jsp"  class='fo'>忘了密码？</a>
				</div>
				<span></span>
				<button type="button" class="loginBtn border-radius">登&ensp;录
				</button>
			</form>
		</div>
	</div> --%>
	<div class="modal-login">
	<!-- class="modal-heading" -->
		<div class="heading"><!-- <img  src="img/logo.png" style='    margin-right: 10px; height: 24px;'><span style="height:2px;">|</span> --><span>fab&ensp;后台管理系统</span></div>
		<div class="modal-body">
			<form class="validFrom" action="" method="get">
				<div class="errormsg">
					<i class="iconfont icon-formerror">${result.msg }</i>
				</div>
				<div class="flex form-item">
					<!-- <i class="iconfont icon-30user"></i> -->
					<!-- <img src="img/user.png" style='width: 26px;height: 26px;'/> --> <input class="flex-item"
						type="text" placeholder="请输入用户名" id="phone" maxlength="11" name="name"
						placeholder="账号" datatype="/[_a-zA-z	0-9]{4,10}/" errormsg="用户名格式不正确！"
						nullmsg="请输入用户名！" autocomplete="off" value="${result.telephone }" />
				</div>
				<div class="flex form-item">
				<!-- <img src="img/password.png" style='width: 26px;height: 26px;'/> -->
					<!-- <i class="iconfont icon-lock"></i> --> <input class="flex-item" id="password" name="password"
						type="password" placeholder="密码" maxlength="20"
						datatype="/[_a-zA-z0-9]{6,20}/"  errormsg="密码格式不正确！"
						nullmsg="请输入密码！" autocomplete="off" value="${result.password }" />
				</div>
				<!-- <div class="modal-footer">
					<a href="forgetPwd.jsp"  class='fo'>忘了密码？</a>
				</div> -->
				<span></span>
				<button type="button" class="loginBtn border-radius" onclick="userLogin()">登&ensp;录
				</button>
				<div class="modal-footer">
				   <input type='checkbox' id="chkRememberPass"/><span>保持登录</span>
					<!-- <a href="forgetPwd.jsp"  class='fo'>忘了密码？</a> -->
				</div>
			</form>
		</div>
	</div>
</body>
<script type="text/javascript">
	<%-- $(".border-radius").click(function(){
		var phone = $("#phone").val();
		var password = $("#password").val();
		 var  data = {"telephone":phone,"password":password}      
		$.ajax({
			type:"POST",
			url:'<%=basePath%>sysUser/login',
			 data: JSON.stringify(data),
             contentType:"application/json;charset=UTF-8", 
             dataType:"json",
			success:function(data){
				if(data.code==200){
					setCookie(phone, password, '', '/');
					 location.href = '<%=basePath%>index.jsp'; 
				}else{
					var result = data.data;
					$(".icon-formerror").text(data.msg);				
				}
			}
		})
	}) --%>
	

function addCookie(name,value,days,path){   /**添加设置cookie**/  
    var name = escape(name);  
    var value = escape(value);  
    var expires = new Date();  
    expires.setTime(expires.getTime() + days * 3600000 * 24);  
    //path=/，表示cookie能在整个网站下使用，path=/temp，表示cookie只能在temp目录下使用  
    path = path == "" ? "" : ";path=" + path;  
    //GMT(Greenwich Mean Time)是格林尼治平时，现在的标准时间，协调世界时是UTC  
    //参数days只能是数字型  
    var _expires = (typeof days) == "string" ? "" : ";expires=" + expires.toUTCString();  
    document.cookie = name + "=" + value + _expires + path;  
}  
function getCookieValue(name){  /**获取cookie的值，根据cookie的键获取值**/  
    //用处理字符串的方式查找到key对应value  
    var name = escape(name);  
    //读cookie属性，这将返回文档的所有cookie  
    var allcookies = document.cookie;         
    //查找名为name的cookie的开始位置  
    name += "=";  
    var pos = allcookies.indexOf(name);      
    //如果找到了具有该名字的cookie，那么提取并使用它的值  
    if (pos != -1){                                             //如果pos值为-1则说明搜索"version="失败  
        var start = pos + name.length;                  //cookie值开始的位置  
        var end = allcookies.indexOf(";",start);        //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置  
        if (end == -1) end = allcookies.length;        //如果end值为-1说明cookie列表里只有一个cookie  
        var value = allcookies.substring(start,end); //提取cookie的值  
        return (value);                           //对它解码        
    }else{  //搜索失败，返回空字符串  
        return "";  
    }  
}  
function deleteCookie(name,path){   /**根据cookie的键，删除cookie，其实就是设置其失效**/  
    var name = escape(name);  
    var expires = new Date(0);  
    path = path == "" ? "" : ";path=" + path;  
    document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path;  
}  
  
/**实现功能，保存用户的登录信息到cookie中。当登录页面被打开时，就查询cookie**/  
window.onload = function(){  
    var telephone = getCookieValue("telephone");  
    document.getElementById("phone").value = telephone;  
    var password = getCookieValue("password");  
    document.getElementById("password").value = password;  
    var objChk  = getCookieValue("objChk");  
    if(objChk=="1"){//设置保持登录了
    	document.getElementById("chkRememberPass").checked=true;
    }else{
    	document.getElementById("chkRememberPass").checked=false;
    }
}  
  
function userLogin(){   /**用户登录，其中需要判断是否选择记住密码**/  
    //简单验证一下  
    var telephone = $("#phone").val();
	var password = $("#password").val();
    var objChk = document.getElementById("chkRememberPass");  
    if(objChk.checked){  
        //添加cookie  
        addCookie("telephone",telephone,7,"/");  
        addCookie("password",password,7,"/");  
        addCookie("objChk","1",7,"/");  
		 var  data = {"telephone":telephone,"password":password}      
		$.ajax({
			type:"POST",
			url:'<%=basePath%>sysUser/login',
			 data: JSON.stringify(data),
             contentType:"application/json;charset=UTF-8", 
             dataType:"json",
			success:function(data){
				if(data.code==200){
					 location.href = '<%=basePath%>index.jsp'; 
				}else{
					var result = data.data;
					$(".icon-formerror").text(data.msg);				
				}
			}
		})
    }else{  
    	deleteCookie("objChk","/");  //删除cookie
    	deleteCookie("telephone","/"); 
    	deleteCookie("password","/"); 
		 var  data = {"telephone":telephone,"password":password}      
		$.ajax({
			type:"POST",
			url:'<%=basePath%>sysUser/login',
			 data: JSON.stringify(data),
             contentType:"application/json;charset=UTF-8", 
             dataType:"json",
			success:function(data){
				if(data.code==200){
					 location.href = '<%=basePath%>index.jsp'; 
				}else{
					var result = data.data;
					$(".icon-formerror").text(data.msg);				
				}
			}
		})
    }  
}  
</script>
</html>